import React,{Component} from "react";
import Article from 'article/Article.js';
import Icons from 'icons/Icons.js';
import NotFound from 'notFound/NotFound.js';
import $ from "jquery";

export default class Home extends Component{
    constructor(){
        super();
        this.state = {
            showIcon: true,
            showArticle: false,
            showNote: false,
            similar: [],
            tab: ['JavaScript','Python']
        };
        let methods = ['SearchFor', 'getRes','toTop','onRef'];
        methods.forEach((method) => this[method] = this[method].bind(this));
    }

    //搜索动作
    SearchFor(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode === 13){
            this.getVal();
        }else {
            var that = this;
            clearTimeout(this.tid);
            this.tid = setTimeout(function() {
                that.getVal();
            }, 4500);
        }
    }

    //获取输入框内容
    getVal(){
        let val = this.searchInput.value;
        if (val.length == 0 || (/^\s+$/g).test(val)){
            //输入为空 or 输入全是空格
        }else{
            this.getRes(val);
        }
    }

    //获取数据
    getRes(val){
        fetch('http://a.modian-tech.com/search?keywords=' + val)
        .then((res)=>{
            if(res.ok){
                res.text().then((res)=>{
                    let data = JSON.parse(res);
                    if(data.langs.length > 0){
                        this.setState({
                            showIcon: false,
                            showNote: false,
                            showArticle: true,
                            // tab: data
                        });
                        this.toTop();
                    }else {
                        this.setState({
                            showIcon: false,
                            showNote: true,
                            showArticle: false,
                            similar: ['Python','Python','Python']
                        });
                    }
                })
            }
        }).catch((res)=>{
            console.log(res,'//////');
            location.replace("#/state404");
        });
    }

    //位移动效
    toTop(){
        $('.title').animate({ textAlign: 'left', top: 30 }, 1000);
        $('.title .logo').animate({ fontSize: '100px', margin:0, lineHeight:'100px' }, 1000);
        $('.wrap').animate({margin: '-225px 0 0 0'}, 1000);
        $('.wrap input').animate({marginLeft: '450px'}, 1000);
    }

    onRef(){
        this.setState({showIcon: false, showNote: false, showArticle: true});
        this.toTop();
    }

    render(){
        return (
            <div className="home">
                <header className="title" ref="logo">
                    <h1 className="logo">心猿意码</h1>
                </header>
                <div className="wrap">
                    <input className="mainInput" autoFocus="autoFocus" ref={(input) => { this.searchInput = input; }}                             onKeyUp={this.SearchFor} type="text" placeholder="按Enter键搜索" />
                </div>
                <NotFound isShow={this.state.showNote} onRef={this.onRef} data={this.state.similar}></NotFound>
                <Icons isShow={this.state.showIcon}></Icons>
                <Article isShow={this.state.showArticle} Data={this.state.tab}></Article>
            </div>
        )
    }
}



